<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8' />
        <style>
            div.c1{
                width:150px;
                height:100px;
                border:1px solid red;
                border-radius: 50px 0px 0px 50px;
                position:relative;
                background-color:red;
                transform:rotate(45deg);
            }
            div.c1::after{
                content:'';
                display:block;
                width:100px;
                height:150px;
                border:1px solid red;
                position:absolute;
                left:49px;top:-51px;
                background-color:red;
                border-radius:50px 50px 0px 0px;
            }
        </style>
    </head>
    <body>
        <h3>CSS样式实例:红心</h3>
        <div class='c1'></div>
    </body>
</html>